<template>
  <div class="monitor">
    <el-form ref="searchForm" :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="state" placeholder="请选择系统名称" filterable clearable>
          <el-option
            v-for="(item, index) in restaurants"
            :key="index + 1"
            :label="item.value"
            :value="item.orgId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="ifSystem" placeholder="请选择是否重要系统" clearable>
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="mode"
          placeholder="请选择灾备模式"
          filterable
          clearable
          @change="handleSelect_orgId"
        >
          <el-option
            v-for="(item, index) in modeList"
            :key="index + 1"
            :label="item.value"
            :value="item.orgId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="position"
          placeholder="请选择部署位置"
          filterable
          clearable
          @change="handleSelect_position"
        >
          <el-option
            v-for="(item, index) in positionList"
            :key="index + 1"
            :label="item.value"
            :value="item.orgId"
          />
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="search" @keyup.enter="monitor()">搜索</el-button>
      <button class="search" @click="reset">重置</button>
    </el-form>
    <main>
      <div ref="container" class="table">
        <el-table
          :data="changeList"
          style="width: 100%"
          :height="tableHeight"
          ref="multipleTableRef"
          :header-cell-style="{
            background: '#F5F7FA',
            fontSize: '14px',
            color: '#909399',
            fontWeight: '300'
          }"
          :cell-style="{ fontSize: '14px', color: '#303133', fontWeight: '300' }"
        >
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column label="系统名称" prop="caption" align="center"> </el-table-column>
          <el-table-column label="灾备模式" prop="constructionModeName" align="center">
          </el-table-column>
          <el-table-column label="部署位置" prop="n6" align="center"> </el-table-column>
        </el-table>
      </div>

      <el-pagination
        ref="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </main>
    <footer class="dialog-footer">
      <el-button @click="Cancel" class="cancel_btn">关闭</el-button>
    </footer>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, reactive, onMounted, nextTick, onBeforeUnmount } from 'vue';
  import {
    selectByOgSysIdAndName,
    selectSysBasicBybascMode,
    selectSysBasicBysysDeployLocationn,
    selectSysBasicIsNoAndModeAndLocation
  } from '@/http/Disaster';
  // import { useRoute } from 'vue-router';
  //   import { useStore } from 'vuex';
  //   const store = useStore();
  const props = defineProps({
    //是否为预览模式
    editData: {
      type: Object,
      default: () => ({})
    }
  });
  // const router = useRouter();
  // const route = useRoute();
  const emits = defineEmits(['handleClose']);
  const state = ref('');
  const ifSystem = ref(props.editData.ifSystem ? props.editData.ifSystem : '');
  const mode = ref(props.editData.mode ? props.editData.mode : '');
  const modeCount = ref(props.editData.modeCount ? props.editData.modeCount : '');
  const position = ref(props.editData.position ? props.editData.position : '');
  const positionId = ref(props.editData.positionId ? props.editData.positionId : '');
  const pageNum = ref(1);
  const pageSize = ref(5);
  const total = ref(0);
  const tableHeight = ref(0);
  const container = ref(null);
  const changeList = reactive([]);
  const restaurants = reactive([]);
  const modeList = reactive([]);
  const positionList = reactive([]);
  onMounted(() => {
    enterKeyup();
    nextTick(() => {
      calHeight();
    });
    changeOrgan();
    Disaster();
    DeployList();
    LocationList();
  });
  const changeOrgan = () => {
    selectByOgSysIdAndName().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      restaurants.length = 0;
      res.data.data.forEach((item) => {
        (restaurants as any).push({
          value: item.caption,
          orgId: item.caption
        });
      });
    });
  };
  const LocationList = () => {
    selectSysBasicIsNoAndModeAndLocation({
      pageSize: pageSize.value,
      pageNum: pageNum.value,
      isKeySys: ifSystem.value,
      sysDeployLocation: positionId.value,
      constructionMode: modeCount.value,
      caption: state.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      changeList.length = 0;
      total.value = res.data.data.total;
      changeList.push(...res.data.data.rows);
    });
  };
  const Disaster = () => {
    selectSysBasicBybascMode().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      modeList.length = 0;
      res.data.data.forEach((item) => {
        (modeList as any).push({
          value: item.valueDetail,
          orgId: item.value
        });
      });
    });
  };
  const DeployList = () => {
    selectSysBasicBysysDeployLocationn().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      positionList.length = 0;
      res.data.data.forEach((item) => {
        (positionList as any).push({
          value: item.valueDetail,
          orgId: item.value
        });
      });
    });
  };
  const calHeight = () => {
    const rect = container.value.getBoundingClientRect();
    tableHeight.value = rect.height;
  };
  const Cancel = () => {
    emits('handleClose');
  };
  // 选中的灾备模式ID
  const handleSelect_orgId = (item) => {
    modeCount.value = item;
  };
  const handleSelect_position = (item) => {
    positionId.value = item;
  };
  // 分页
  const handleSizeChange = (size) => {
    pageSize.value = size;
    LocationList();
  };
  const handleCurrentChange = (num) => {
    pageNum.value = num;
    LocationList();
  };
  const reset = () => {
    state.value = '';
    ifSystem.value = '';
    mode.value = '';
    modeCount.value = '';
    position.value = '';
    positionId.value = '';
  };
  const search = () => {
    state.value = state.value.replace(/(^\s*)|(\s*$)/g, '');
    ifSystem.value = ifSystem.value.replace(/(^\s*)|(\s*$)/g, '');
    LocationList();
  };
  const monitor = () => {
    document.onkeydown = (e) => {
      if (e.keyCode == 13) {
        search();
      }
    };
  };
  const enterKeyupDestroyed = () => {
    document.removeEventListener('keyup', monitor());
  };
  const enterKeyup = () => {
    document.addEventListener('keyup', monitor());
  };
  onBeforeUnmount(() => {
    enterKeyupDestroyed();
  });
  //   watch(props, () => {
  //     console.log('props改变');
  //     console.log(props.editData);
  //     nextTick(() => {
  //       // calHeight();
  //     });
  //   });
</script>
<style lang="less" scoped>
  .demo-form-inline {
    height: 32px;
    margin-bottom: 20px;
    .el-form-item {
      width: 202px;
      height: 32px;
      margin-right: 20px;
      margin-bottom: 0;
      box-sizing: border-box;
    }
    .search {
      width: 60px;
      height: 33px;
      border: 1px solid #d8d6e1;
      background: #fff;
      margin-left: 13px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400px;
      color: #606266;
    }
    :deep(input::placeholder) {
      font-size: 14px;
      font-weight: 300;
      color: #303133;
    }
  }
  main {
    .table {
      height: 360px;
    }
    :deep(.el-table thead) {
      height: 60px;
    }
    :deep(.el-table tr) {
      height: 60px;
    }
    .el-pagination {
      padding-top: 30px;
      justify-content: end;
    }
  }
  .dialog-footer {
    // margin-right: 10px;
    height: 60px;
    padding-top: 25px;
    box-sizing: border-box;
    .cancel_btn {
      float: right;
    }
  }
</style>
